"use client";
import { useState } from "react";
import { Upload, Button, message, Card, Spin, Input, Space } from "antd";
import { UploadOutlined, SearchOutlined } from "@ant-design/icons";
import type { UploadFile } from "antd";
// 暂时屏蔽图表相关导入
// import ReactECharts from "echarts-for-react";
// import type { EChartsOption } from "echarts";

export default function WordChartPage() {
  const [loading, setLoading] = useState(false);
  const [queryLoading, setQueryLoading] = useState(false);
  const [dataImported, setDataImported] = useState(true); // 数据是否已导入
  const [queryText, setQueryText] = useState(""); // 查询输入框内容
  const [queryResult, setQueryResult] = useState<{
    ok: boolean;
    data?: {
      chartConfig?: unknown;
      sessionId?: string;
      note?: string;
    };
    message?: string;
  } | null>(null); // 查询结果
  const [sessionId] = useState(() => `word-chart-${Date.now()}`); // 会话ID（页面加载时生成）
  // const [chartData, setChartData] = useState<EChartsOption | null>(null);
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // 处理文件上传
  const handleUpload = async (file: File) => {
    setLoading(true);
    setQueryResult(null); // 清空之前的查询结果
    setDataImported(false); // 重置导入状态

    const formData = new FormData();
    formData.append("file", file);

    try {
      const response = await fetch("/api/word/upload", {
        method: "POST",
        body: formData,
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.message || "上传失败");
      }

      message.success(`文档上传成功！已提取 ${result.data?.tableCount || 0} 个表格，存储了 ${result.data?.documentCount || 0} 个文档块到向量数据库`);
      
      // 数据导入成功，启用查询输入框
      setDataImported(true);
      setQueryText(""); // 清空之前的查询
      setQueryResult(null); // 清空之前的查询结果

      // 暂时屏蔽查询和图表渲染功能，只测试向量存储
      // // 等待处理完成
      // await new Promise((resolve) => setTimeout(resolve, 2000));

      // // 查询处理结果
      // const queryResponse = await fetch("/api/word/query", {
      //   method: "POST",
      //   headers: { "Content-Type": "application/json" },
      //   body: JSON.stringify({
      //     question: "请提取文档中的所有表格数据，并以JSON格式返回，包含图表配置信息",
      //   }),
      // });

      // const queryResult = await queryResponse.json();

      // if (!queryResponse.ok) {
      //   throw new Error(queryResult.message || "查询失败");
      // }

      // // 解析返回的JSON数据并转换为echarts配置
      // if (queryResult.data && queryResult.data.chartConfig) {
      //   setChartData(queryResult.data.chartConfig);
      //   message.success("图表数据加载成功");
      // } else {
      //   message.warning("未找到图表数据");
      // }
    } catch (error) {
      console.error("处理失败:", error);
      message.error(error instanceof Error ? error.message : "处理失败");
    } finally {
      setLoading(false);
    }
  };

  // 处理查询
  const handleQuery = async () => {
    if (!queryText.trim()) {
      message.warning("请输入查询问题");
      return;
    }

    setQueryLoading(true);
    setQueryResult(null);

    try {
      const response = await fetch("/api/word/query", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          question: queryText,
          sessionId: sessionId, // 传递会话ID，用于历史记录
        }),
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.message || "查询失败");
      }

      // 打印查询结果（用于测试）
      console.log("📊 查询结果:", result);
      console.log("📊 图表配置JSON:", JSON.stringify(result.data?.chartConfig, null, 2));

      setQueryResult(result);
      message.success("查询成功，请查看控制台输出的JSON数据");

      // 暂时屏蔽图表渲染
      // if (result.data && result.data.chartConfig) {
      //   setChartData(result.data.chartConfig);
      //   message.success("图表数据加载成功");
      // } else {
      //   message.warning("未找到图表数据");
      // }
    } catch (error) {
      console.error("查询失败:", error);
      message.error(error instanceof Error ? error.message : "查询失败");
    } finally {
      setQueryLoading(false);
    }
  };

  const uploadProps = {
    beforeUpload: (file: File) => {
      // 只允许上传 .docx 文件
      const isDocx = file.name.endsWith(".docx");
      if (!isDocx) {
        message.error("只能上传 .docx 格式的Word文档");
        return false;
      }
      handleUpload(file);
      return false; // 阻止自动上传
    },
    fileList,
    onChange: ({ fileList: newFileList }: { fileList: UploadFile[] }) => {
      setFileList(newFileList);
    },
    maxCount: 1,
  };

  return (
    <main className="max-w-6xl mx-auto p-6 space-y-6">
      <Card title="Word文档表格提取与图表生成">
        <div className="space-y-4">
          <div>
            <Upload {...uploadProps}>
              <Button icon={<UploadOutlined />} loading={loading}>
                上传Word文档
              </Button>
            </Upload>
            <p className="text-gray-500 text-sm mt-2">
              支持上传 .docx 格式的Word文档，系统将自动提取表格数据并生成图表
            </p>
          </div>

          {loading && (
            <div className="flex justify-center py-8">
              <Spin size="large" tip="正在处理文档..." />
            </div>
          )}

          {/* 查询输入区域 */}
          {dataImported && !loading && (
            <Card title="数据查询" className="mt-4">
              <Space.Compact style={{ width: "100%" }}>
                <Input
                  placeholder="请帮我查询2025-10-01的产品销售"
                  value={queryText}
                  onChange={(e) => setQueryText(e.target.value)}
                  disabled={queryLoading}
                  onPressEnter={handleQuery}
                  size="large"
                />
                <Button
                  type="primary"
                  icon={<SearchOutlined />}
                  loading={queryLoading}
                  onClick={handleQuery}
                  size="large"
                >
                  查询
                </Button>
              </Space.Compact>
              <p className="text-gray-500 text-sm mt-2">
                数据已导入成功，现在可以输入问题查询表格数据。支持多维度查询，如&ldquo;不同地区的&rdquo;、&ldquo;不同时间的&rdquo;、&ldquo;不同产品的&rdquo;等。
              </p>
            </Card>
          )}

          {/* 查询结果显示 */}
          {queryResult && !queryLoading && (
            <Card title="查询结果（JSON格式）" className="mt-4">
              <div className="space-y-2">
                <p className="text-sm text-gray-600">
                  查询成功！请查看浏览器控制台（F12）查看完整的JSON数据
                </p>
                <pre className="whitespace-pre-wrap break-words text-sm bg-gray-50 p-3 rounded border max-h-96 overflow-auto">
                  {JSON.stringify(queryResult, null, 2)}
                </pre>
              </div>
            </Card>
          )}

          {/* 暂时屏蔽图表渲染 */}
          {/* {chartData && !loading && (
            <Card title="数据可视化图表" className="mt-4">
              <ReactECharts
                option={chartData}
                style={{ height: "500px", width: "100%" }}
                opts={{ renderer: "svg" }}
              />
            </Card>
          )} */}
        </div>
      </Card>
    </main>
  );
}

